<template>
  <div class="page-container">
    <ResponsiveNav />
    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="handleBack">
              <i class="fas fa-chevron-left"></i> {{ $t('返回') }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <h4 class="title">{{ $t(`${valLabel[route.query.key]}`)  }}</h4>
      <el-skeleton :loading="loading" :rows="10" animated />
      <div v-html="dataInfo[route.query.key]" class="content"></div>
    </div>

    <div class="bottom-wrapper">
      <Footer />
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {ApiConfig} from "@/api/common";
import { useRoute, useRouter  } from "vue-router";
import ResponsiveNav from "@/components/ResponsiveNav.vue";
import Footer from "@/components/Footer.vue";

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const dataInfo = ref({})
const valLabel = {
  'settlementContract': '入驻协议',
  'userContract': '用户协议',
  'secrecyContract': '隐私政策',
  'agentContract': '创业联盟协议'
}

const getData = async () => {
  loading.value = true
  ApiConfig({
    key: 'CONTRACT_SETTING',
  }).then(res => {
    dataInfo.value = res.data
  }).finally(() => {
    loading.value = false
  })
}

const handleBack = () => {
  router.go(-1)
}

watch(
  () => route.query,
  () => {
    getData()
  },{
    deep: true
  }
);

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.page-container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  .page-content{
    padding: 20px 200px;
  }
}
.title{
  font-size: 20px;
  color: #333;
  text-align: center;
}
.content{
  margin-top: 20px;
}
.page-nav {
  margin-bottom: 14px;

  .breadcrumb {
    font-size: 12px;
    color: #565959;

    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565959;
        font-weight: normal;

        &:hover {
          color: #c45500;
        }
      }
    }

    i {
      margin-right: 4px;
      font-size: 10px;
    }
  }
}
.bottom-wrapper {
  width: 100%;
  background-color: #fff;
  margin-top: auto;
}
</style>
